<template>
  <div>
    <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
    <div class="displayflex top-bar-w">
      <div class="top-bar-c flex1">
          <i class="iconfont icon-sech"></i> 
          <div class="ipt"><input type="text" placeholder="输入订单号" v-model="bbillno"></div>
      </div> 
      <div class="btn-sech" @click="resetGet()">搜索</div>
    </div>
    <div class="assess-tit" v-if="userinfo.UserBizType == 'Driver'">收到的评价（{{totalLength}}）</div>
    <div class="assess-tit" v-else>给出的评价（{{totalLength}}）</div>

    <scroller lock-x height="-85" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="0" v-show="todolist.length>0">
        <div>
          <div class="assess-wrap" v-for="item in todolist">
            <div class="assess-head">{{item.BBillNo}}</div>
            <div class="displayflex assess-ctx">
              <div class="pic"><img src="~images/icon/peo.jpg"></div>
              <div class="flex1">
                <div class="name">{{item.EvaluationObjectName}}</div>
                <div class="star"><rater disabled :value="item.EvaluationScore" active-color="#f6a355" :font-size="8"></rater></div>
                <div class="txt" v-for="tagText in item.EvaluationDetails">{{tagText.text}}</div>
              </div>
              <div class="time">{{item.EvaluationDate | timeshort}}</div>
            </div>
            <div class="assess-txt">
              {{item.Memo}}
            </div>
          </div>
        </div>
        <p class="txt-bottom" v-if="totalLength == todolist.length && totalLength>3"><em class="txt">我是有底线的</em></p>
    </scroller>
    <div class="noDate_page" v-if="todolist.length<=0">
        <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
        未找到相关数据
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
        showLoad:false,
        bbillno:'',
        todolist:[],
        totalLength: 0,
        bbillno: '',
        count: 0,
        pageindex: 1,
      };
  },
  watch:{
    bbillno(val){
        if(!val){
        this.resetGet();
        }
    }
  },
  computed: {
    userinfo() {
      if (localStorage.UserInfo) {
        return JSON.parse(localStorage.UserInfo);
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      var self = this;
      if (this.totalLength == this.todolist.length && this.todolist.length > 0) {
        return false;
      }
      
      var query = {};
      if(this.userinfo.UserBizType == 'Driver') {
        query = {
          BBillNo: this.bbillno,
          EvaluationObjectGuid: self.userinfo.StaffID,
          PageIndex:this.pageindex,
          PageSize:4
        };
      } else {
        query = {
          BBillNo: this.bbillno,
          CreateUserId: self.userinfo.StaffID,
          PageIndex:this.pageindex,
          PageSize:4
        };
      }

      this.showLoad = true;
      
      this.Ajax.post("GetTrorderevaluation", query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
            var result = resp.Datas;

            if(result.length > 0){
              for(var i=0; i<result.length; i++)
              {
                var temp = JSON.parse(result[i].EvaluationDetails);
                result[i].EvaluationDetails = temp;
              }
              
              self.todolist = self.todolist.concat(result);
              self.pageindex++;
              self.count = 0;
            };
            self.totalLength = resp.TotalRecords;
            if (self.pageindex == 2) {
              self.$nextTick(() => {
                self.$refs.scrollerBottom.reset({
                  top: 0
                  });
              });
            }
        }
      });
    },
    onScrollBottom() {
      this.count++;
      if (this.count == 1) {
          this.getData();
      }
    },
    resetGet(){
      this.todolist = [];
      this.count=0;
      this.pageindex=1;
      this.getData();
    },
  }
};
</script>